<template>
  <div class="task-details-frame">
    <div class="task-details-frame-inner">
      <div class="title">
        任务详情
        <i @click="closeTaskDetails"></i>
      </div>
      <div class="content">
        <vuescroll :ops="ops">
          <!--        基本信息-->
          <div class="basic-info">
            <div class="row">
              <div class="row-left" v-show="data_taskDetails.taskType!=1">任务名称:</div>
              <div class="row-left" v-show="data_taskDetails.taskType==1">里程碑:</div>
              <div class="row-right">{{data_taskDetails.taskName}}</div>
            </div>
            <div class="row">
              <div class="row-left">所属项目:</div>
              <div class="row-right">{{data_taskDetails.projectShortName || '无归属项目'}}</div>
            </div>
            <div class="row row2">
              <div class="row2-left">
                <div class="row-left">下次汇报时间:</div>
                <div class="row-right">{{data_taskDetails.reportCycle==0?'无':data_taskDetails.nextReportDate}}</div>
              </div>
              <div class="row2-right" v-show="data_taskDetails.taskType==1">
                <div class="row-left">里程碑完结时间:</div>
                <div class="row-right">{{data_taskDetails.limitTime}}</div>
              </div>
            </div>
            <div class="row">
              <div class="row-left">指派人:</div>
              <div class="row-right">{{data_taskDetails.createUserName}}</div>
            </div>
            <div class="row">
              <div class="row-left">执行人:</div>
              <div class="row-right">
              <span v-for="user in data_taskDetails.executeUser">
                {{user.userName}},
              </span>
              </div>
            </div>
            <div class="row">
              <div class="row-left">附件:</div>
              <div class="row-right">
                <!--             视频 -->
                <ul class="list" v-if="data_taskDetails.videos&&data_taskDetails.videos.length&&data_taskDetails.videos.length>0">
                  <li v-for="(item,index) in data_taskDetails.videos" @click="openVideo(item)"  :key="index">
                    <i class="video-icon"></i>
                    {{item.fileName}}
                  </li>
                </ul>
                <!--             文件 -->
                <ul class="list" v-if="data_taskDetails.files&&data_taskDetails.files.length&&data_taskDetails.files.length>0">
                  <li  v-for="(item,index) in data_taskDetails.files" @click="fileDownload(item.filePath)" :key="index">
                    <i :class="item.fileNameSuffix+'-icon'"></i>
                    {{item.fileName}}
                  </li>
                </ul>
                <!--                图片-->
                <ul class="list" v-if="data_taskDetails.images&&data_taskDetails.images.length&&data_taskDetails.images.length>0">
                  <li  v-for="(item,index) in data_taskDetails.images" :key="index" @click="opemImg(item.filePath)">
                    <div class="img" :style="{backgroundImage: 'url(\''+ (encodeURI(item.filePath)) +'\')' }"></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--        定期汇报-->
          <div class="report">
            <div class="row pt32">
              <div class="row-left">定期汇报:</div>
              <div class="row-right">{{data_taskDetails.reportCycle==0?'无':data_taskDetails.daysCn}}</div>
            </div>
          </div>
          <!--        流转信息-->
          <div class="roam-info pt32">
            <div class="row">
              <div class="row-left">
                流转信息:
              </div>
              <div class="row-right">
                <ul class="roam-info-list" v-if="data_taskDetails.historyReportMsg.length>0">
                  <li v-for="(item,index) in data_taskDetails.historyReportMsg" :key="index">
                    <div class="time">{{new Date(item.dateTime).Format('yyyy-MM-dd')}}</div>
                    <div class="title" v-if="item.flag!=3">延期申请<span>（申请从
                      <i v-if="data_taskDetails.taskType==2">{{new Date(item.oldLimitTime).Format('yyyy-MM-dd')}}</i>
                      <i v-else>{{item.oldLimitTime}}</i>
                      延至
                      <i v-if="data_taskDetails.taskType==2">{{new Date(item.delayLimitTime).Format('yyyy-MM-dd')}}</i>
                       <i v-else>{{item.delayLimitTime}}</i>
                      ）
                    </span></div>
                    <div class="title" v-if="item.flag==3">完结汇报</span></div>
                    <div class="examine" v-if="item.flag!=3">
                      <div class="auditor">
                        <div class="auditor-left">审核人:</div>
                        <div class="auditor-right">{{item.approveUsername}}</div>
                      </div>
                      <div class="auditResult">
                        <div class="auditResult-left">审核结果:</div>
                        <div class="auditResult-right">
                          <span v-if="item.approveStatus==1">待审核</span>
                          <span v-if="item.approveStatus==2">通过</span>
                          <span v-if="item.approveStatus==3">不通过</span>
                          <span v-if="item.approveStatus==4">作废</span>
                        </div>
                      </div>
                    </div>
                    <div class="content" v-if="item.flag!=3">
                      <div class="content-left" style="width: 70px;padding-left: 12px;">审批意见:</div>
                      <div class="content-right">{{item.approveRemark||'无'}}</div>
                    </div>
                    <div class="content">
                      <div class="content-left">内容:</div>
                      <div class="content-right">{{item.content}}</div>
                    </div>
                    <div class="tips">
                      <div class="tips-left">附件:</div>
                      <div class="tips-right">
                        <!--                        视频-->
                        <ul class="videos-list list" v-if="item.videos&&item.videos.length&&item.videos.length>0">
                          <li v-for="(d,index) in item.videos" :key="index" @click="openVideo(d)">
                            <i class="video-icon"></i>
                            {{d.fileName}}
                          </li>
                        </ul>
                        <!--                        附件-->
                        <ul class="files-list list" v-if="item.files&&item.files.length&&item.files.length>0">
                          <li v-for="(d,index) in item.files" :key="index" @click="fileDownload(d.filePath)">
                            <!--                            <a :href="d.filePath">-->

                            <!--                            </a>-->
                            <i :class="d.fileNameSuffix+'-icon'"></i>
                            {{d.fileName}}
                          </li>
                        </ul>
                        <!--                        图片-->
                        <ul class="images-list list" v-if="item.images&&item.images.length&&item.images.length>0">
                          <li v-for="(d,index) in item.images" :key="index" @click="opemImg(d.filePath)">
                            <div class="img" :style="{backgroundImage: 'url(\''+ (encodeURI(d.filePath)) +'\')' }"></div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
                <span v-else>无</span>
              </div>
            </div>
          </div>
        </vuescroll>
      </div>
<!--      &&data_taskDetails.executeIds.indexOf(this.$store.state.userInfo.userId)!=-1-->
      <div class="btn" v-if="type=='my_task_list'||type=='my_assign_list'">
        <span v-if="type=='my_task_list'&&data_taskDetails.executeIds&&data_taskDetails.executeIds.indexOf(this.$store.state.userInfo.userId)!=-1" @click="openTaskHandle()">去处理  {{data_taskDetails.executeUserId}}</span>
        <span v-if="type=='my_assign_list'" @click="remindTask">提醒处理</span>
        <span v-if="type=='my_assign_list'&&data_taskDetails.taskType!=1&&data_taskDetails.taskType!=3" class="no_bg" @click="delTask">删除任务</span>
      </div>
    </div>

    <div v-if="is_show_video">
      <videoBox :data="videoData" @close="closeVideo"></videoBox>
    </div>
    <el-dialog append-to-body :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import taskHandle from '@/components/taskDetails/handle'
  import videoBox from '@/components/video/index'
  export default {
    name: "taskDetails",
    props: {
      data: {
        type: Object,
        default: {}
      },
    },
    components: {
      vuescroll,videoBox
    },
    data() {
      return {
        dialogVisible:false,
        dialogImageUrl:'',
        videoData:{},
        is_show_video:false,
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0.1,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '200px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        data_taskDetails: {
          historyReportMsg: [],//流转信息
        },
        taskId: '',//任务id
        type: '',//my_task_list:我的任务 待办 my_task_list_have:我的任务 已办 my_assign_list:我指派的 待办 my_assign_list_have:我指派的 已办
      }
    },
    created() {
      console.log(111);
      this.taskId = this.data.taskId;
      this.type = this.data.type;
      //查询任务详情
      let params = {
        userId: this.$store.state.userInfo.userId,
        taskId: this.taskId,
      };
      this.$http.get('/task/task/query/info', {params: params}).then(res => {
        if (res.statusCode == 200) {
          let data=res.data;
          let executeIds=[];
          data.executeUser.map(function (item,index) {
            executeIds.push(item.userId);
          });
          data.executeIds=executeIds;
          this.data_taskDetails = data;
          console.log(this.data_taskDetails)
        } else {
          this.$message.error(res.statuaMsg)
        }
      });
    },
    methods: {
      opemImg(url){
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },
      openVideo(data){
        this.videoData=data;
        this.is_show_video=true;
      },
      closeVideo(){
        this.is_show_video=false;
      },
      fileDownload(url) {
        console.log(url);
        if (!url) {
          return;
        }
        var myFrame = document.createElement('iframe');
        // 'https://www.smartptm.com/file/1574387841676_qn17l3lhpu.txt'
        window.open(url)
        // myFrame.src=url;
        // myFrame.style.display = 'none';
        // document.body.appendChild(myFrame);
      },
      closeTaskDetails() {
        this.$emit("close");
      },
      //处理任务
      openTaskHandle() {
        this.$emit("openTaskHandle");
      },
      //提醒处理任务
      remindTask() {
        this.$http.post('task/task/report/pushMsg', {
          taskId: this.taskId,//任务id
        }).then(res => {
          if (res.statusCode == 200) {
            this.$message.success('提醒成功');
            this.closeTaskDetails();
          } else {
            this.$message.success(res.statusMsg);
          }
        });
      },
      //删除任务
      delTask() {
        this.$confirm('是否删除该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            taskId: this.taskId,//任务id
          };
          this.$http.post('/task/task/delete/delTask', params).then(res => {
            if (res.statusCode == 200) {
              this.$message.success('删除成功');
              this.$emit("update");
              this.closeTaskDetails();
            } else {
              this.$message.error(res.statucMsg);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">

  .task-details-frame {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;

    .task-details-frame-inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 626px;
      height: 614px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 31px 31px 0 31px;
      box-sizing: border-box;

      > .title {
        line-height: 1.1;
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;

        > i {
          background-image: url("../../assets/img/close_icon.png");
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          top: 0px;
          right: 0px;
          cursor: pointer;
        }
      }

      .content {
        height: calc(100% - 48px);

        .row {
          overflow: hidden;
          font-size: 14px;
          line-height: 1;
          padding-bottom: 32px;

          .row-left {
            float: left;
            width: 110px;
            text-align: right;
            color: #96a2aa;
          }

          .row-right {
            float: right;
            padding-left: 23px;
            width: calc(100% - 110px);
            color: #454a55;
            box-sizing: border-box;
            >.list{
              overflow: hidden;
              li{
                width: 100px;
                height: 100px;
                border: 1px solid #EEEEEE;
                text-align: center;
                font-size: 12px;
                padding-top: 50px;
                box-sizing: border-box;
                color: #96A2AA;
                position: relative;
                margin: 0 16px 16px 0;
                /*border-radius: 6px;*/
                white-space: nowrap;
                cursor: pointer;
                float: left;
                >.img{
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: block;
                  width: 100px;
                  height: 100px;
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center;
                  /*border-radius: 6px;*/
                }
                i {
                  position: absolute;
                  width: 20px;
                  height: 20px;
                  top: 30px;
                  left: 40px;
                  background-image: url("../../assets/img/annex/ic_ty.png");
                }

                i.add {
                  background-image: url("../../assets/img/annex/ic_add.png");
                }

                i.word-icon {
                  background-image: url("../../assets/img/annex/ic_word.png");
                }
                i.pdf-icon {
                  background-image: url("../../assets/img/annex/ic_pdf.png");
                }
                i.txt-icon {
                  background-image: url("../../assets/img/annex/ic_txt.png");
                }
                i.xlsx-icon{
                  background-image: url("../../assets/img/annex/ic_excel.png");
                }
                i.ppt-icon{
                  background-image: url("../../assets/img/annex/ic_ppt.png");
                }
                i.video-icon{
                  background-image: url("../../assets/img/annex/ic_video.png");
                }
                i.icon-del{
                  background-image: url("../../assets/img/annex/ic_delete.png");
                  width: 16px;
                  height: 16px;
                  position: absolute;
                  left: 90px;
                  top: -5px;
                }
              }
            }
          }
        }

        .row2 {
          display: flex;

          .row2-left {
            flex: 1;
            float: left;
            width: 90px;
            text-align: right;
            color: #96a2aa;

            .row-right {
              text-align: left;
            }
          }

          .row2-right {
            flex: 1;
            float: right;
            padding-left: 23px;
            width: calc(100% - 90px);
            color: #454a55;
            box-sizing: border-box;
          }
        }

        .basic-info {
          /*height: 229px;*/
          border-bottom: 1px solid #eeeeee;
        }

        .report {
          height: 77px;
          border-bottom: 1px solid #eeeeee;
        }

        .roam-info {
          height: 230px;
          height: calc(230px - 80px);

          .roam-info-list {
            li {
              padding-bottom: 24px;

              > .time {
                padding-bottom: 24px;
              }

              .title {
                padding-left: 22px;
                position: relative;

                > span {
                  color: #96a2aa;
                }
              }

              .title:after {
                position: absolute;
                content: "";
                width: 6px;
                height: 6px;
                background-color: #0a52e4;
                border-radius: 50%;
                left: 0;
                top: 5px;
              }

              .examine {
                padding-top: 24px;
                padding-left: 22px;
                display: flex;

                .auditor {
                  width: 140px;
                  font-size: 14px;
                  color: #96a2aa;
                  display: flex;

                  > div {
                    flex: 1;
                  }

                  .auditor-right {
                    color: #454a55;
                  }
                }

                .auditResult {
                  flex: 1;
                  display: flex;
                  color: #96a2aa;

                  .auditResult-right {
                    flex: 1;
                    padding-left: 24px;
                    color: #454a55;
                  }

                  .auditResult-left {
                    width: 60px;
                  }
                }
              }

              .content, .tips {
                display: flex;
                padding-top: 24px;

                .content-left, .tips-left {
                  padding-left: 24px;
                  width: 46px;
                  text-align: right;
                  color: #96a2aa;
                  box-sizing: content-box;
                }

                .content-right, .tips-right {
                  flex: 1;
                  color: #454a55;
                  padding-left: 24px;
                }

                .tips-right {
                  .list {
                    overflow: hidden;
                    padding-top: 10px;

                    > li {
                      cursor: pointer;
                      float: left;
                      width: 100px;
                      height: 100px;
                      border: 1px solid #EEEEEE;
                      text-align: center;
                      font-size: 12px;
                      padding-top: 60px;
                      box-sizing: border-box;
                      color: #96A2AA;
                      position: relative;
                      margin: 0 16px 16px 0;
                      /*border-radius: 6px;*/
                      white-space: nowrap;

                      a {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                      }

                      > .img {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        width: 100px;
                        height: 100px;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
                        /*border-radius: 6px;*/
                      }

                      i {
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 30px;
                        left: 40px;
                        background-image: url("../../assets/img/annex/ic_ty.png");
                      }

                      i.add {
                        background-image: url("../../assets/img/annex/ic_add.png");
                      }

                      i.word-icon {
                        background-image: url("../../assets/img/annex/ic_word.png");
                      }

                      i.pdf-icon {
                        background-image: url("../../assets/img/annex/ic_pdf.png");
                      }

                      i.txt-icon {
                        background-image: url("../../assets/img/annex/ic_txt.png");
                      }

                      i.xlsx-icon {
                        background-image: url("../../assets/img/annex/ic_excel.png");
                      }

                      i.ppt-icon {
                        background-image: url("../../assets/img/annex/ic_ppt.png");
                      }

                      i.video-icon {
                        background-image: url("../../assets/img/annex/ic_video.png");
                      }

                      i.icon-del {
                        background-image: url("../../assets/img/annex/ic_delete.png");
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        left: 90px;
                        top: -5px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .btn {
        left: 0;
        bottom: 0;
        position: absolute;
        height: 80px;
        width: 100%;
        background-color: #ffffff;
        text-align: right;
        padding: 0 32px;
        box-sizing: border-box;

        > span {
          margin-top: 24px;
          display: inline-block;
          height: 32px;
          line-height: 32px;
          width: 88px;
          background-color: #0755DB;
          border-radius: 6px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
        }

        .no_bg {
          background: none;
          color: #B3C0C9;
        }
      }
    }
  }
</style>
